<template>
  <button class="checkin-btn" @click="handleCheckin">每日签到</button>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
import { userApi } from '@/api/user'

const userStore = useUserStore()

const handleCheckin = async () => {
  if (!userStore.isLoggedIn) {
    userStore.showLoginModal = true
    ElMessage.info('请先登录后再签到')
    return
  }
  const level = userStore.userInfo?.level ?? 1
  if (level < 2) {
    ElMessage.warning('仅会员用户可参与每日签到')
    return
  }
  try {
    const res = await userApi.checkin()
    const data = res.data || {}
    ElMessage.success(`签到成功，积分+${data.pointsAdded || 0}${data.couponGranted ? '；已发放优惠券' : ''}`)
    await userStore.refreshUserInfo()
  } catch (e) {
    const msg = e?.response?.data?.message || e?.message || '签到失败'
    ElMessage.error(msg)
  }
}
</script>

<style scoped>
.checkin-btn {
  width: 100%;
  height: 180px;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .checkin-btn { height: 100px; border-radius: 4px; }
}

@media (max-width: 480px) {
  .checkin-btn { height: 80px; }
}

@media (max-width: 360px) {
  .checkin-btn { height: 60px; }
}
</style>